<style>
table.lo * { font-size: 12px; }
table.lo { width: 100%; }
table.lo td { vertical-align: top; text-align: left; }
table.lo td.login { width: 330px; }
table.lo td.register { width: 500px; padding-left: 5px; }
.pure_form_extra label, .pure_form_extra input { font-size: 12px !important; }
.pure_form_extra label * { font-size: 12px !important; }
.pure_form_extra .mandatory { color: #ff0000; padding-left: 5px; }
.pure_form_extra { background: #fff; padding: 10px; border: 1px solid #aaa; border-radius: 8px; font-size: 12px !important; }
table.list { border-left: 1px solid #aaa; border-top: 1px solid #aaa; font-size: 13px; width: 100%; }
table.list th,table.list td { vertical-align: middle; text-align: left;padding: 0 5px; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; }
table.list th { height: 28px; background-color: #ddd; font-weight: bold; color: #333; }
table.list td { height: 25px; word-wrap: break-word; overflow: hidden; }
table.list tr.rowodd td { background-color: #eee; }
table.list tr.roweven td { background-color: #fff; }
table.list tr.rowodd:hover td { background-color: #f4f3b2; }
table.list tr.roweven:hover td { background-color: #f4f3b2; }
</style>

<?php

$id = Utils::get_param('id', NULL);

$opts = new stdClass();
$opts->cd = 't.id = :v1';
$opts->cdv = array(':v1' => $id);
$data = $orm->get('pb_ecom_order', NULL, NULL, NULL, NULL, $opts)->d;

if (count($data) == 0) {
  return;
}

$opts = new stdClass();
$opts->cd = 't.order_id = :v1';
$opts->cdv = array(':v1' => $data[0]->id);
$data[0]->__purchases = $orm->get('pb_ecom_purchase', NULL, NULL, NULL, NULL, $opts)->d;

$pg = Utils::get_param('pg', 1);
$objs = $orm->get('pb_ecom_order', 't.order_number', 'DESC', $pg, SIZE, NULL);
?>

<table class="lo" cellPadding="0" cellSpacing="0">
  <tr>
    <td class="login">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Basic Info</legend>
      
        <div class="pure-control-group">
          <label>Order No.</label>
          <input id="order_no" type="text" class="pure-input-1-2" placeholder="{Order No.}" readonly="true" />
        </div>
        
        <div class="pure-control-group">
          <label>Date</label>
          <input id="date" type="text" class="pure-input-1-2" placeholder="{Date}" readonly="true" />
        </div>
        
        <div class="pure-control-group">
          <label>Payment</label>
          <input id="payment" type="text" class="pure-input-1-2" placeholder="{Payment}" readonly="true" />
        </div>
        
        <div class="pure-control-group">
          <label>Courier</label>
          <input id="courier" type="text" class="pure-input-1-2" placeholder="{Courier}" readonly="true" />
        </div>
      </div>
    </td>
    <td class="register">
      <div id="register" class="pure-form pure-form-aligned pure_form_extra">
        <legend>Post Address</legend>
      
        <div class="pure-control-group">
          <label>Family Name</label>
          <input id="last_name" type="text" class="pure-input-1-2" placeholder="{Family Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Given Name</label>
          <input id="first_name" type="text" class="pure-input-1-2" placeholder="{Given Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Address</label>
          <input id="address1" type="text" class="pure-input-1-2" placeholder="{Address1}" />
        </div>
        
        <div class="pure-control-group">
          <label>Address2</label>
          <input id="address2" type="text" class="pure-input-1-2" placeholder="{Address2}" />
        </div>
        
        <div class="pure-control-group">
          <label>City</label>
          <input id="city" type="text" class="pure-input-1-2" placeholder="{City}" />
        </div>
        
        <div class="pure-control-group">
          <label>Country</label>
          <input id="country" type="text" class="pure-input-1-2" placeholder="{Country}" />
        </div>
        
        <div class="pure-control-group">
          <label>Post Code</label>
          <input id="zip" type="text" class="pure-input-1-2" placeholder="{Post Code}" />
        </div>
        
        <div class="pure-control-group">
          <label>Phone</label>
          <input id="phone" type="text" class="pure-input-1-2" placeholder="{Phone}" />
        </div>
        
        <div class="pure-control-group">
          <label>Email</label>
          <input id="email" type="text" class="pure-input-1-2" placeholder="{Email}" />
        </div>
        
      </div>
      <div>&nbsp;</div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <table class="list" cellpadding=0 cellspacing=0>
        <thead>
          <tr>
            <th>Item</th>
            <th style="width: 60px;">W (kg)</th>
            <th style="width: 80px;">Qty</th>
            <th style="width: 60px;">Each</th>
            <th style="width: 90px;">Total</th>
          </tr>
        </thead>
        <tbody id="purchase_body"></tbody>
      </table>
      <div>&nbsp;</div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Message</legend>
        
        <textarea id="comment" style="width: 100%; resize: none; height: 150px;"></textarea>
      </div>
      <div>&nbsp;</div>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Total</legend>
      
        <div class="pure-control-group">
          <label>Total</label>
          <input id="total" type="text" class="pure-input-1-2" placeholder="{Total}" />
        </div>
        
        <div class="pure-control-group">
          <label>Delivery Subtotal</label>
          <input id="delivery_subtotal" type="text" class="pure-input-1-2" placeholder="{Delivery Subtotal}" readonly="true" />
        </div>
        
        <div class="pure-control-group">
          <label>&nbsp;</label>
          <button class="pure-button pure-input-1-2 pure-button-primary" onclick="submit_obj();">Update</button>
        </div>
      </div>
    </td>
  </tr>
</table>
<script type="text/javascript">
  /*<![CDATA[*/
  var __data = JSON.parse('<?php echo addslashes(json_encode($data)); ?>');
  var __file = '<?php echo addslashes($app_data->param_file); ?>';
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __objs = JSON.parse('<?php echo addslashes(json_encode($objs)); ?>');
  
  $(function(){
    render();
  });

  function render() {
    Utils.leftbar(
      __objs,
      __data[0].id,
      'Orders',
      'order_number',
      function(page) {
        Url.redirect(__redmd, __sys + '.php?i=' + __id + '&__file=' + __file + '&id=' + __data[0].id + '&pg=' + page);
      }
    );
    render_data();
  };

  function render_data() {
    Url.insert_param('id', __data[0].id);
    
    $('#order_no').val(__data[0].order_number);
    $('#date').val(__data[0].date);
    $('#payment').val(__data[0].payment_name);
    $('#courier').val(__data[0].delivery_name);
    $('#last_name').val(__data[0].last_name);
    $('#first_name').val(__data[0].first_name);
    $('#address1').val(__data[0].address1);
    $('#address2').val(__data[0].address2);
    $('#city').val(__data[0].last_name);
    $('#country').val(__data[0].last_name);
    $('#zip').val(__data[0].zip);
    $('#phone').val(__data[0].phone);
    $('#email').val(__data[0].email);
    $('#comment').val(__data[0].comment);
    $('#total').val((parseFloat(__data[0].total, 10) + parseFloat(__data[0].delivery_subtotal, 10)).toFixed(2));
    $('#delivery_subtotal').val(__data[0].delivery_subtotal);

    $('#purchase_body').empty();
    for (var idx in __data[0].__purchases) {
      var itm = __data[0].__purchases[idx];
      $('#purchase_body').append(
        '<tr class="' + ((idx % 2 ==0) ? 'roweven' : 'rowodd') + '">' +
          '<td>' + itm.name + ((itm.attr_opt_code != '') ? ' (' + itm.attr_opt_code + ')' : '') + '</td>' +
          '<td>' + accounting.formatNumber(itm.weight) + '</td>' +
          '<td>' + accounting.formatNumber(itm.quantity) + '</td>' +
          '<td>' + accounting.formatMoney(itm.price, itm.curr) + '</td>' +
          '<td>' + accounting.formatMoney(itm.total, itm.curr) + '</td>' +
        '</tr>'
      );
    }
    
    if (__data[0].__purchases.length == 0) {
      $('#purchase_body').append('<tr class="roweven"><td colSpan="5">None</td></tr>')
    }
  };

  function submit_obj() {
    req = __data[0];
    req.last_name = $('#last_name').val();
    req.first_name = $('#first_name').val();
    req.address1 = $('#address1').val();
    req.address2 = $('#address2').val();
    req.city = $('#city').val();
    req.country = $('#country').val();
    req.zip = $('#zip').val();
    req.phone = $('#phone').val();
    req.email = $('#email').val();
    req.comment = $('#comment').val();
    req.total = $('#total').val() - req.delivery_subtotal;
    req.__pg = __objs.p;

    Ajax.request(
      __requrl + 'submit_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        if (rslt.__objs) {
          __objs = rslt.__objs;
          delete rslt.__objs;
        }
        __data[0] = rslt;
        render();
      },
      null
    );
  };

  function get_obj(id) {
    var req = {
      id: id
    };
    Ajax.request(
      __requrl + 'get_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        __data = rslt;
        render();
      },
      null
    );
    return false;
  };
  /*]]>*/
</script>